<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安全生产</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
<!--    <link rel="stylesheet" href="../../css/swiper.min.css">-->
    <link rel="stylesheet" href="../../css/style.css">
    <style>
      .zhibiao_page{
        /*background-color: #0c1021;*/
      }
      .self_box{
        width: 500px;
      }
      .out_amount {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 10px;
        color: #ffffff;
        text-align: center;
      }
      .out_amount:last-child{
        margin-bottom: 0;
      }
      .title {
        font-size: 18px;
        font-weight: bold;
      }
      .item_title{
        font-size: 16px;

      }
      .item_value{
        color: #53d8f1;
        font-size: 18px;
      }
      .item_value i{
        font-weight: bold;
      }

      .item_value .unit{
        color: #ffffff;
      }
    </style>

</head>
<body class="zhibiao_page">

<div class="self_box">
  <div class="out_amount">
    <div class="title"></div>
    <div class="amount">
      <div class="item_title">日产量</div>
    </div>
    <div class="amount">
      <div class="item_title ">月累量</div>
    </div>
    <div class="amount">
      <div class="item_title ">年累量</div>
    </div>
  </div>
  <div class="out_amount">
    <div class="title">出矿量</div>
    <div class="amount">
      <div class="item_value out_day"><i></i> <span class="unit">吨</span></div>
    </div>
    <div class="amount">
      <div class="item_value out_mounth"><i></i> <span class="unit">吨</span></div>
    </div>
    <div class="amount">
      <div class="item_value out_year"><i></i> <span class="unit">吨</span></div>
    </div>
  </div>
  <div class="out_amount">
    <div class="title">供矿量</div>
    <div class="amount">
      <div class="item_value pro_day"><i></i> <span class="unit">吨</span></div>
    </div>
    <div class="amount">
      <div class="item_value pro_mounth"><i></i> <span class="unit">吨</span></div>
    </div>
    <div class="amount">
      <div class="item_value pro_year"><i></i> <span class="unit">吨</span></div>
    </div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){
    getJson('zzp_hxzb_zcyl.json',{},function (res) {
        $('.out_day i').text(parseInt(res.data[0].rjsl || 0))
        $('.out_mounth i').text(parseInt(res.data[0].yljsl || 0))
        $('.out_year i').text(parseInt(res.data[1].yljsl || 0))
        $('.pro_day i').text(parseInt(res.data[2].rjsl || 0))
        $('.pro_mounth i').text(parseInt(res.data[2].yljsl || 0))
        $('.pro_year i').text(parseInt(res.data[3].yljsl || 0))
    })
})
</script>
</html>
